<template>
<div>
  <span v-for = "(item,index) in array"> 
    <li>{{ item }}：{{ index }}</li>
  </span>
  <span v-for = "value,key in obj">
    <li>{{key}} ：{{ value }}</li>
  </span>
  <span>
    <li v-for = "item in arr">
      id: {{item.id}}
      name: {{ item.name}} 
      price: {{ item.price }}
    </li>
  </span>
</div>
</template>

<script setup>
  import {ref} from 'vue'
    // 指令
    // 1.概念：作用在标签上，vue的特殊语法
    // 2.作用：增强标签渲染数据的能力 
    // 3.分类
      // 5.列表渲染指令: 基于数组/对象/数字循环生成一套列表
      // v-for
      // 数字数组调用 - 变量名，下标名
      // 对象数组调用 - 数组对象名
      // 对象调用 - 值,键
    let array = ref([11,22,33,44])
    let arr = ref([ 
      { id: 1, name: '篮球', price: 299 },
      { id: 2, name: '足球', price: 99 },
      { id: 3, name: '排球', price: 199 }
    ])
    let obj = {
      name: "zhangsan",
      age: 18,
      id: 110
    }
      // 6.双向绑定指令: 数据<->视图(数据与视图相互影响)
</script>

<style scoped>

</style>